<template>
    <div class="">


        <button @click="handlerClick"> 父组件触发 test 组件的事件</button>
        Parent -----------{{ msg }} count:{{ count }}

        <hr>
        <!-- <Child /> -->


        <Son :value="msg" @inputClick="handlerApp" @update:modelValue="count = $event" />


        <div ref="doms" id="box">我是box</div>

        <Test ref="test" />
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref, onMounted } from "vue"

import Child from './Child.vue'

import Son from './Son.vue'

import Test from './Test.vue'

export default {
    props: {},
    name: "",
    //import引入的组件需要注入到对象中才能使用
    components: {
        Child,
        Son,
        Test
    },
    //这里存放数据
    setup () {
        const data = reactive({

        })
        const msg = ref('hello')

        const count = ref(10)

        const doms = ref(null)
        const test = ref(null)


        const handlerApp = (val) => {
            console.log(val);


            msg.value = val;

        }

        onMounted(() => {
            document.getElementById('box').style.color = 'red'
            // console.log(doms.value);   vue3 里面操作dom 
            doms.value.style.backgroundColor = 'black'

        })

        const handlerClick = () => {
            alert('parent')
            console.log(test.value)
            test.value.fnClick()
        }




        return {
            data,
            msg,
            handlerApp,
            count,
            doms,
            test,
            handlerClick
        }
    }
}
</script>

<style lang="css" scoped>
</style>
